<template>
	<view class="detail">

		<dl>
			<dt>
				<!-- 轮播图 -->
				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
					:mode="mode" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
						<swiper-item v-for="(item, index) in imgs" :key="index">
							<view class="swiper-item" :class="'swiper-item' + index">
								<img class="swiperimg" :src="item" alt="">
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</dt>
			<dd>
				<p class="msg">
					<span class="s1">{{list.prodName}}</span>
					<view class="collectbox">
						<span class="s2" v-if="collect==false" @click="changeImg">
							<uni-icons type="heart" size="20"></uni-icons><br>
							收藏
						</span>
						<span class="s2" v-if="collect==true" @click="changeImg">
							<uni-icons type="scan" size="20"></uni-icons><br>
							取消收藏
						</span>
					</view>

				</p>
				<p class="brief">
					{{list.brief}}
				</p>
				<p class="price">
					￥{{list.price}}
				</p>
			</dd>
		</dl>

		<view class="Selectedbox">
			<span class="s1">
				已选
			</span>
			<span class="s2">
				{{gdlist[0].skuName}},1件
			</span>
			<span class="s3">
				<uni-icons type="more-filled" size="20"></uni-icons>
			</span>
		</view>

		<!-- 弹框 -->
		<uni-section title="基本示例" type="line">
			<view class="example-body box">
				<button class="button" type="primary" @click="toggle('bottom')"><text
						class="button-text">底部</text></button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				imgs: [],
				detailid: '',
				collect: false, //判断是否已收藏
				gdlist: []
			}
		},
		onLoad(option) {
			console.log("列表携带的值", option)
			this.detailid = option.index;

		},
		mounted() {
			//
			uni.request({
				url: 'http://111.67.198.176:8112/prod/prodInfo',
				method: 'GET',
				data: {
					prodId: this.detailid
				},
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					this.list = res.data
					this.imgs = this.list.imgs.split(',')
					this.gdlist = res.data.skuList
					console.log(this.gdlist, '77777777777777')
					this.text = 'request success';
				}
			});
		},
		methods: {
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			//点击收藏的效果
			changeImg() {
				var that = this;
				var params = {
					id: that.case_id
				}
				//收藏
				if (that.collect == false) {
					// this.$api.appPlateForm('POST', 'example/collection', params, function(res) {
					// 	if (res.code == 200) {
					// 		that.collect = true;
					// 		uni.showToast({
					// 			icon: 'success',
					// 			title: '收藏成功'
					// 		})
					// 	}
					// }, function(err) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: err.msg
					// 	})
					// });
					uni.request({
						url: 'http://111.67.198.176:8112/p/user/collection/addOrCancel',
						method: 'POST',
						data: {
							text: 'uni.request'
						},
						header: {
							'custom-header': 'hello' //自定义请求头信息
						},
						success: (res) => {
							this.imginfo = res.data
							this.text = 'request success';
						}
					});
				} else {
					//取消收藏
					this.$api.appPlateForm('POST', 'example/collectDel', params, function(res) {
						if (res.code == 200) {
							that.collect = false;
							uni.showToast({
								icon: 'none',
								title: '取消成功'
							})
						}
					}, function(err) {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					});
				}
			},
		}
	}
</script>
<style lang="scss">
	.swiper-box {
		width: 320px;
		height: 320px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 320px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	.swiperimg {
		width: 100%;
		height: 100%;
	}

	.detail {
		width: 100%;
		height: 100%;
		background: #eee;
	}

	dl {
		width: 100%;
		height: 426px;

		dt {
			width: 100%;
			height: 320px;
		}

		dd {
			width: 100%;
			height: 106px;
			border-top: 1px solid #eee;
			background: white;

			.msg {
				width: 100%;
				height: 35px;
				display: flex;
				justify-content: end;
				margin-top: 10px;

				.s1 {
					width: 85%;
					height: 100%;
					font-size: 14px;
				}

				.collectbox {
					width: 13%;
					height: 100%;
					font-size: 10px;
					border-left: 1px solid #eee;
					text-align: center;
				}
			}

			.brief {
				margin-left: 6px;
				margin-top: 10px;
				font-size: 10px;
				color: #999999;
			}

			.price {
				margin-left: 6px;
				margin-top: 10px;
				color: #eb2444;
			}
		}
	}

	.Selectedbox {
		width: 100%;
		height: 35px;
		margin-top: 10px;
		background: white;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.s1 {
			color: #999999;
			font-size: 10px;
		}

		.s2 {
			font-size: 15px;
		}
	}
</style>
